<template>
  <div class="container mx-auto px-4 py-5">
    <!-- 标题区域增强 -->
    <div class="border-l-4 border-amber-500 pl-4 mb-12">
      <h2 class="text-4xl font-display font-bold text-gray-800 tracking-wide">
        为您精选
      </h2>
      <p class="mt-2 text-gray-600 max-w-2xl">
        甄选全球顶级艺术藏品，感受艺术大师的灵感碰撞
      </p>
    </div>

    <!-- 网格布局优化 -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 lg:grid-cols-4 gap-8">
      <div v-for="(artwork, index) in recommendedArtworks" :key="index"
        class="group relative overflow-hidden rounded-2xl transition-all duration-500 hover:shadow-2xl" :class="{
          'lg:col-span-2 lg:row-span-2': index % 5 === 0,
          'hover:-translate-y-2': index !== 0
        }">
        <!-- 艺术图像容器 -->
        <div class="relative overflow-hidden rounded-t-2xl">
          <img :src="artwork.image" format="webp" quality="80"
            class="w-full h-full object-cover transition-all duration-700 group-hover:scale-110"
            :class="index === 0 ? 'h-[360px]' : 'h-64'" loading="lazy" :alt="artwork.title" />

          <!-- 玻璃拟态层 -->
          <div class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-5">
            <h3 class="font-bold text-white text-xl">{{ artwork.title }}</h3>
            <p class="text-amber-100 opacity-90">{{ artwork.artist }}</p>
          </div>

          <!-- 艺术流派标签 -->
          <span class="absolute top-4 right-4 bg-amber-500 text-white px-3 py-1 rounded-full text-xs font-bold">
            {{ genreTag(index) }}
          </span>
        </div>

        <!-- 信息卡片增强 -->
        <!-- <div class="bg-white p-4 rounded-b-2xl border-t-4 border-amber-400">
          <div class="flex justify-between items-start">
            <div>
              <span class="text-gray-500 text-sm">估价</span>
              <div class="font-bold text-xl text-gray-800 mt-1 transition-colors group-hover:text-amber-600">
                {{ artwork.price }}
              </div>
            </div>
          </div>

          <div class="mt-3 pt-3 border-t border-gray-100 flex items-center">
            <span class="text-xs text-gray-500">
              {{ auctionInfo(index) }}
              <span class="text-amber-600 font-medium">进行中</span>
            </span>
          </div>
        </div> -->

        <!-- 悬停效果层 -->
        <div
          class="absolute inset-0 bg-gradient-to-b from-transparent via-black/20 to-black/50 opacity-0 group-hover:opacity-100 transition-opacity duration-300 pointer-events-none">
        </div>
      </div>
    </div>

    <!-- 查看所有按钮 -->
    <!-- <div class="text-center mt-16">
      <button
        class="px-8 py-3 bg-gradient-to-r from-amber-500 to-amber-700 text-white rounded-full hover:shadow-lg transition-all flex items-center mx-auto gap-2">
        浏览更多藏品
        <Icon name="mdi:arrow-right" class="group-hover:translate-x-1 transition-transform" />
      </button>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface Artwork {
  id: string
  title: string
  artist: string
  price: string
  image: string
}

// 实际项目中从API获取推荐数据
const recommendedArtworks: Artwork[] = [
  {
    id: '101',
    title: '日出印象',
    artist: '克劳德·莫奈',
    price: '¥32,800,000',
    image: 'https://picsum.photos/id/10/800/600'
  },
  {
    id: '102',
    title: '星空咖啡馆',
    artist: '文森特·梵高',
    price: '¥48,500,000',
    image: 'https://picsum.photos/id/11/800/600'
  },
  {
    id: '103',
    title: '睡莲池',
    artist: '克劳德·莫奈',
    price: '¥27,300,000',
    image: 'https://picsum.photos/id/12/800/600'
  },
  {
    id: '104',
    title: '梦',
    artist: '巴勃罗·毕加索',
    price: '¥62,100,000',
    image: 'https://picsum.photos/id/13/800/600'
  },
  {
    id: '105',
    title: '戴珍珠耳环的少女',
    artist: '约翰内斯·维米尔',
    price: '¥55,900,000',
    image: 'https://picsum.photos/id/14/800/600'
  },
  {
    id: '106',
    title: '星空',
    artist: '文森特·梵高',
    price: '¥89,750,000',
    image: 'https://picsum.photos/id/15/800/600'
  }
];

// 收藏功能
const favorites = ref<string[]>([]);
const toggleFavorite = (id: string) => {
  if (favorites.value.includes(id)) {
    favorites.value = favorites.value.filter(item => item !== id);
  } else {
    favorites.value.push(id);
  }
};

// 生成艺术流派标签
const genreTag = (index: number) => {
  const tags = ['印象派', '后印象派', '立体主义', '超现实主义', '巴洛克', '文艺复兴'];
  return tags[index % tags.length];
};

// 拍卖信息
const auctionInfo = (index: number) => {
  const houses = ['苏富比', '佳士得', '保利拍卖', '中国嘉德', '菲利普斯', '富艺斯'];
  const dates = ['6月28日', '7月5日', '7月12日', '7月19日', '7月26日', '8月2日'];
  return `${houses[index % houses.length]} · ${dates[index % dates.length]}`;
};
</script>

<style scoped>
/* 添加艺术字体 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Raleway:wght@300;400;500&display=swap');

.font-display {
  font-family: 'Playfair Display', serif;
}

/* 卡片悬停动画 */
.group {
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    box-shadow 0.4s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.group:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

/* 价格动画效果 */
.group-hover\:text-amber-600 {
  transition: color 0.3s ease;
}
</style>